.flex {
    display: -moz-box;
    /* Firefox */
    display: -ms-flexbox;
    /* IE10 */
    display: -webkit-box;
    /* Safari */
    display: -webkit-flex;
    /* Chrome, WebKit */
    display: flex;
}
.size(@size){
    height: @size;
    line-height: @size;
    box-sizing: border-box;
    border-radius: 2px;
}
.small{
    .size(32px)
}
.middle{
    .size(36px)
}
.large{
    .size(40px)
}
.title{
    font-size: 20px;
    padding: 10px 0;
    color: @c999999;
    
}
.next-title{
    font-size: 16px;
    padding: 10px 0;
    color: @c00B289;
}
.w300{
    width: 300px;
}
.w550{
    width: 550px;
}
.code{
    padding: 20px;
    border-radius: 10px;
    background: @c000000;
}
.text-input{
    width:450px;
    border:1px solid #eaeefb;
    background: @cFAFAFA;
    border-radius: 4px;
    // height: 200px;
    text-align: left;
    padding: 20px;
    color: @c666666;
}
.use{
    margin:10px 0;
    color: @c999999;
}
.block{
    padding: 20px;
    border:1px solid @cD3DCE6;
    // margin-top:30px;
    margin-bottom: 30px;
}
.demo-tab{
    margin-top:40px;
}
.view-box{
    display: flex;
    .view-left{
        width: 600px;
        margin-right: 30px;
    }
    .view-right{
        min-width: 600px;
        flex:1;
        position: fixed;
        right: 20px;
    }
}
// table
.table {
    width: 100%;
    // text-indent: 10px;
    td,th{
        padding-left: 10px;
    }
    .head {
        background: @cE5EDF2;
        height: 48px;
        // line-height: 48px;
        padding: 0 20px 0 10px;
    }
    .content {
        height: 58px;
        transition: all .3s;
        &:nth-child(odd) {
            background: @cF4F6F9;
        }
        &:nth-child(even) {
            background: @cFFFFFF;
        }
        &:hover {
            cursor: default;
            background: @cCCF0E7;
        }
        a {
            color: @c0D56A6;
            line-height: 32px;
            padding: 0 10px;
            text-indent: 0;
            border-radius: 2px;
            display: block;
            white-space: nowrap;
        }
        a:hover {
            cursor: pointer;
            transition: background-color 0.3s ease-out;
            background-color: #D9EAFE;
        }
    }
}
.input-box{
    flex: 1;
    display: flex;
    background: @cF1F5F8;
    padding-left: 10px;
    border:1px solid @cF1F5F8;
    transition: border .3s;
    &:hover {
        border-color: @cD3DCE6; // cursor: default;
    }
    &:disabled {
        background: @cE8E8E8;
        color: @c999999;
    }
    &:focus {
        border-color: @c3F97F9;
    }
    &.success {
        border-color: @c8CBE54;
    }
    &.error {
        border-color: @cFF7272;
    }
    .input{
        width: 100%;
        height: 100%;
        background: @cF1F5F8;
        border-radius: 2px;
    }
    .icon{
        color: @c999999;
        margin-left: 5px;
    }
    .input-title{
        color: @c666666;
    }
}